import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import { visualizer } from 'rollup-plugin-visualizer';
import viteCompression from 'vite-plugin-compression';
import { viteMockServe } from 'vite-plugin-mock'
import path from 'path';
import { minifyHtml, injectHtml } from 'vite-plugin-html';
import styleImport from 'vite-plugin-style-import';

export default defineConfig(({ command, mode }) => {
  return ({
    base: '/',
    css: {
      preprocessorOptions: {
        scss: {
        },
        less: {
          // modifyVars: {
          //   hack: `true; @import (reference) "${path.resolve("src/assets/css/base.less")}"`,
          // },
          javascriptEnabled: true,
        },
      }
    },
    optimizeDeps: {
    },
    plugins: [
      vue(),
      vueJsx(),
      styleImport({
        libs: [
          {
            libraryName: 'vant',
            esModule: true,
            resolveStyle: (name) => path.resolve(__dirname, 'node_modules/') + `/vant/es/${name}/style`,
          }
        ],
      }),
      viteMockServe({
        mockPath: './src/mock/',
        supportTs: true,
        localEnabled: true,
      }),
      viteCompression(),
    ],
    resolve: {
      alias: [
        { find: "@", replacement: path.resolve(__dirname, 'src') }
      ],
    },
    build: {
      minify: true,
      rollupOptions: {

        input: {
          index: path.resolve(__dirname, 'index.html'),
        },
        plugins: [

          visualizer(
            {
              filename: path.resolve(__dirname, 'dist/stats.html'),
              template: 'treemap',
              sourcemap: true
            }
          )
        ],
        output: {
          namespaceToStringTag: true // close this option, so that router dynamic import will result "Cannot read property 'toStringTag' of undefined". reference: https://github.com/vitejs/vite/issues/1921
        }
      },
      sourcemap: true
    },
    server: {
      port: 4000,
    }
  })
});
